<template>
  <div class="showQuestion" id="questionsBodyRef">
    <div class="Bulletin">      
      <el-text><el-icon size="12"><WarningFilled /></el-icon>欢迎使用私人题库</el-text>      
    </div>
    <el-button type="primary" size="large" text @click="onClickReturnHome">《返回</el-button>
    <div class="affix-container">
      <el-dialog
        v-model="state.dialogVisible"
        title="上传文件"
        width="500"       
      >
        <el-upload
          ref="uploadFileRef"
          :name=state.upload_file
          :headers="{
            token: state.token
          }"
          class="upload-demo"
          drag
          :file-list="fileList"
          :action="state.uploadPaperFileServer"
          :accept="state.accept"
          :multiple="false"
          :show-file-list="true"
          :on-success="handleSuccess"
          :on-error="handleError"
          :auto-upload="true"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                  文件拖拽这里或 <em>点击上传</em>
            </div>
          <template #tip>
            <div class="el-upload__tip">
              注意:只能上传{{ state.accept }}文件,且文件大小不超过8MB
            </div>
          </template>
        </el-upload>      
        <template #footer>
          <div class="dialog-footer">
            <el-button type="warning" @click="state.dialogVisible = false">取消</el-button>         
          </div>
        </template>
      </el-dialog>
      <el-select
        v-model="state.inputQuestionType"
        placeholder="选择录入方式"
        size="small"
        style="width: 150px"
        @change="handleSelectAddQeustionType"
      >
        <el-option
          v-for="item_options in options"
          :key="item_options.value"
          :label="item_options.label"
          :value="item_options.value"
        />
      </el-select>   
      <el-input
        v-model="keyword"
        style="max-width: 200px"
        placeholder="请输入关键词"
        class="input-with-select"
      >      
        <template #append>
          <el-button :icon="Search" @click="onClickSearch" />
        </template>
      </el-input>
      
      <!-- 固钉展示购物车，购物车里面有表格，展示已选的题目 -->
      <el-affix :offset="60">
        <el-popover
          placement="left-start"
          title="您已选题目："
          :width="950"
          trigger="hover"
        >
          <template #reference>
            <el-badge :value="state.selectQuestionList.length" class="item">
              <el-button :icon="ShoppingCart" size="large" circle/> 
            </el-badge>
          </template>
          <el-table ref="multipleTableRef" class="tableClass" :data="state.selectQuestionList" stripe
            max-height="400"
            :row-style="{height:50+'px'}" 
	          :cell-style="{padding:0+'px'}"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange" border
          >
            <el-table-column type="selection" width="35" />
            <el-table-column type="index" width="45" label="序" />
            <el-table-column width="500" property="content" label="内容" show-overflow-tooltip />
            <el-table-column width="100" property="answer" label="答案" show-overflow-tooltip />
            <el-table-column width="200" property="explain" label="解析" show-overflow-tooltip />
            <el-table-column align="right" width="55" >
              <template #header>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除选中题"
                  placement="top"
                >
                  <el-icon @click="handeleMultiDelete()"><DeleteFilled /></el-icon>
                </el-tooltip>
              </template>
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除该题"
                  placement="top"
                >
                  <el-icon style="width: 1em; height: 1em; margin-right: 1px" @click="handleDelete(scope.$index)">
                    <RemoveFilled />
                  </el-icon>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="修改该题"
                  placement="top"
                >
                  <Edit style="width: 1em; height: 1em; margin-right: 1px" @click="handleEdit(scope.$index)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="tableButton">
            <el-button type="primary" :icon="View" @click="showManyQuestionReadOnlyClick()" >浏览</el-button>
            <el-button type="primary" :icon="Promotion" @click="GroupQuestionListClick()" >组卷</el-button>
          </div>
          
        </el-popover>
      </el-affix>
    </div> 
    <!-- 用卡片展示题目 -->

      <div v-for="item in state.questionList" :key="item.id">
        <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">                
                <div class="others">                  
                  <span> | 创建者：{{ item.owner_info.nickname }}</span>     
                  <span> | 来源：{{ item.reference }}</span>                    
                    <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top">
                      <el-button :icon="View" size="small" @click="viewDetail(item)" ></el-button>
                    </el-tooltip>                   
                    <template v-if="isOwner(item)">
                      <el-tooltip class="box-item" effect="dark" content="更新题目" placement="top">
                        <el-button :icon="EditPen" size="small" @click="updateQuestionClick(item)" ></el-button>
                      </el-tooltip>
                    </template>
                    <el-button type="primary" size="small" @click="addToCart($event, item)" >组</el-button>          
                </div>
              </div>
          </template> 
          <div class="card_content">
            <p> 【{{item.type_cn}}】</p>
            <div v-html="item.content" class="line-break"></div>
            <div class="question-knowledge">
                  <span>标签：</span>
                    <template v-for="(tag,index) in item.tag" :key="index">       
                      <el-button :type="getButtonType()" size="small" text @click="onClickOneTag(tag.id)">{{ tag.name }}</el-button>
                      <el-button v-if="state.deleteTagMode==true"  size="small" :icon="Delete" text @click="onClickDeleteTag(tag.id, item.id)"></el-button>
                    </template>
                    <el-tooltip class="box-item" effect="dark" content="添加标签" placement="top">
                      <el-button type="warning" size="small" text @click="addTagForQuestion(item.id)" :icon="Plus"></el-button>
                    </el-tooltip>        
                    <el-tooltip class="box-item" effect="light" content="删除标签" placement="top">
                      <el-button type="warning" size="small" text @click="state.deleteTagMode=!state.deleteTagMode" :icon="Setting"></el-button>
                    </el-tooltip>
                   
              </div>       
          </div>
          <el-drawer
            v-model="state.drawerVisible"
            title="添加标签"
            direction="rtl" 
          >
            <el-input v-model="state.selectedTag.name" style="width: 240px" placeholder="输入标签名" />
            <el-button type="success" size="small" @click="onClickQueding">确定</el-button>
            <div class="tag-mode">      
              <el-button text v-for="item in state.tagList" :key="item.id" :type="getButtonType()" @click="onClickTagGetQuestion(item.name)" size="small">{{ item.name }}</el-button>      
            </div>
            <el-button type="warning" size="large" @click="getTagAll" text>刷新标签</el-button>
            <template #footer>
              <div style="flex: auto">
                <el-button @click="state.drawerVisible=false">取消</el-button>               
              </div>
            </template>
          </el-drawer>
        </el-card>
      </div> 
      <!-- 分页展示题目 -->
      <div class="pagination">       
        <!-- <div v-if="state.file !==''">
          <el-button type="warning" :icon="Download" @click="onClickDownloadFile(state.file)" ></el-button>
        </div> -->
        <el-pagination
          background
          layout="total, pre, pager, next, jumper"
          :total="state.total"
          :page-sizes="[10,20,50]"
          :page-size="state.pageSize"     
          @current-change="handleCurrentChange"
        />
      </div>
 
  </div>

  <ViewQuestionDetail ref="viewQuestionDetail" :question="state.question"></ViewQuestionDetail>
  <EditeOneQuestionDialogePrivate ref="editeOneQuestionDialogePrivate" :type="state.type" :fileList="state.fileList" :question="state.question" :father_method="reGetQuestion"></EditeOneQuestionDialogePrivate>  
</template>

<script setup>
  import { reactive, ref, onMounted, watch, getCurrentInstance } from 'vue'
  import axios from '@/utils/axios'
  import { useRoute, useRouter } from 'vue-router'
  import ViewQuestionDetail from '@/views/ViewQuestionDetail.vue'
  import { View, ShoppingCart, Promotion, Plus, Setting, Delete, EditPen, WarningFilled, Search} from '@element-plus/icons-vue'
  import EditeOneQuestionDialogePrivate from '@/views/EditeOneQuestionDialogePrivate.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useStore } from 'vuex'
  import { localGet, uploadPaperFileServer, deepClone } from '@/utils'
  const options = [
    {
      value: 'docx_detach',
      label: 'word答案试题分离',
    },
    {
      value: 'docx_attach',
      label: 'word答案附题后',
    },
    {
      value: 'markdown_detach',
      label: 'markdown答案试题分离',
    },
    {
      value: 'markdown_attach',
      label: 'markdown答案附题后',
    },
  ]
  const keyword = ref('')
  const store=useStore()
  const showManyQuestionReadOnlyDialog = ref()
  const editeOneQuestionDialogePrivate = ref()
  const viewQuestionDetail = ref()
  const multipleTableRef = ref()
	const select_order_number = ref('') //表格select选中的条数
  const select_orderId = ref([]) //表格select复选框选中的id
  const multipleSelection = ref([]) 
  const router = useRouter()
  const uploadFileRef = ref(null)
  const fileList = ref([])
  const buttonTypeList = ['primary', 'success', 'info', 'warning', 'danger']
  const getButtonType =()=>{
    let value = Math.floor(Math.random() * buttonTypeList.length)
    return buttonTypeList[value % buttonTypeList.length]
  }
     // 返回到私人题库首页
     const onClickReturnHome=()=>{
    router.push("/userCenter/addNode")
  }
  // 发送删除试题和标签关联
  const onClickDeleteTag=(tag_id, question_id)=>{
    console.log('删除试题和标签的关联啦')
    let params = {question_id: question_id, tag_id:tag_id}
      axios.delete(`/QuestionPrivateModelViewSet/delete_tag/`, {params}).then((res) => {
      if(res.code==200){
        ElMessage.success( '删除标签成功')       
        reGetQuestion()   
      }else
      if(res.code==406){
        ElMessage.warning( '他人试题，你无权修改')
      }
      else
      if(res.code==1099){
        ElMessage.warning( '序列化错误')
      }
      else{
        console.log("提交失败", res)
      }       
    }).catch((error)=>{
      console.log("错误：", error)
    })
  }
  // 获取自己名下的标签
  const getTagAll=()=>{
    console.log('将要获取所有自己名下的标签')
    axios.get('/TagModelViewSet/get_all_tag/').then(res => {
      console.log('获取私有标签：', res)
        if (res.code==200){
            state.tagList = res.data.results
        }else{       
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取标签错误：", error)
    })
  }
  // 点击一个tag后，跳转到tag模式，并搜索出该tag下的试题
  const onClickOneTag = (id)=>{
    console.log('按照tag获取试题：', id)
    let params = {tag_id: id}
    axios.get(`/TagModelViewSet/get_question/`,{params}).then(res => {
      if (res.code==200){
        console.log("tag获取的列表题目：",res.data.results)
        state.questionList = res.data.results
        for(let index=0; index<state.questionList.length;index++ ){
          state.questionList[index].content = modifyDoubleDollarToSingle(state.questionList[index].content)
        }   
        state.total=res.total
        scrollToTop()
        eventBus.emit("tagModeWaitShowQuestion")
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
        state.total=0
        state.error = res.message
        if (res.code==403){
          ElMessage.error("请重新登录")
          router.push("/login")
        }
      }
    })
    .catch((error)=>{
      console.log("获取目录题目错误：", error)
    }) 
  }
  // 通用变量
  const state = reactive({
    accept: '.docx,.zip',
    deleteTagMode: false,
    drawerVisible: false,
    accept: '.docx,.DOCX',
    file: '',      //存放按试卷查找的试卷url
    bulletinList: [],   //公告栏通知
    bulletinFirst: {},   // 公告栏第一条通知
    fileList:[],
    id: 0,          // 存储册、章、节、知识点的id，默认的第一册
    page: 1,
    size: 10,
    loading: false, // 列表数据接口返回前的 loading
    questionList: [], // 数据列表
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
    knowledgepointId: -1,
    apiName : "/QuestionPrivateModelViewSet/get_all_default/",    //后端api名称
    range: "course",      //所有题目的大范围，比如按章、节、课程等
    isGetQuestionsByKnowledgepoint: false,  //是否按照知识点搜索题目，方便判断录入题目
    isgetQuestionsByPaper:false,    //是否联考试题页面，用于新增该联考卷
    paperId:10,                      // 当前页面卷子的id
    selectQuestionList: [],         // 选中的题目，用于组卷
    selectQusetionId: 0,   // 用于添加标签
    question: null, 
    question_detail: Object,
    type: "modifySelectedQuestion",
    userFavoriteQuestions:[],
    drawer:false,
    token:localGet('token') || "",
    uploadPaperFileServer,
    limit:3,
    questionListUploading:[],       // 将要上传给试卷的题目列表
    showQuestionList:[],            // 用于查看的题目
    secondDrawer:false,              //第2个抽屉的显示
    thirdDrawer:false,              // 第3个抽屉的显示
    dialogVisible: false,
    upload_file: 'upload_file',
    inputQuestionType:'',
    returnQuestionList:[],
    selectedNode: {'id':0, 'name':''},
    tagVisible:false,
    selectedTag: {'id':0, 'name':''},
    mode: 'chapter',
    tagList:[],
  })
  // 为试题添加标签做准备，显示对话框和记录试题id
  const addTagForQuestion=(id) => {
    console.log('添加试题的标签', id)
    state.drawerVisible=true
    state.selectQusetionId = id
  }
  // 点击标签按钮，先设置好参数，再请求后端添加试题的标签
  const onClickTagGetQuestion = (name)=>{
    state.selectedTag.name = name
    postTag()
    state.drawerVisible = false;
  }
  // 点击为试题关联（添加）标签后，再重新获取试题
  const onClickQueding=() =>{
    postTag()
    state.selectedTag.name = ''
  }
  // 为试题添加标签发送数据库持久化
  const postTag=()=>{
      let params = {question_id: state.selectQusetionId, tag_name:state.selectedTag.name}
      axios.post(`/QuestionPrivateModelViewSet/add_tag/`, params).then((res) => {      
      if(res.code==200){
        ElMessage.success( '创建成功')
        state.drawerVisible=false
        reGetQuestion()   
      }else
      if(res.code==1099){
        ElMessage.warning( '标题不能为空！')
      }
      else
      if(res.code==1098){
        ElMessage.warning( '标签已经存在！')
      }
      else{
        console.log("提交失败", res)
      }       
    }).catch((error)=>{
      console.log("错误：", error)
    })
  }
  // 删除数组元素中的knowledgepoint和knowledgepoint_cn和bank_point,并关联到试题中
  const deleteForPrivate=(array) =>{
    for(let item of array){
      delete item.knowledgepoint
      delete item.knowledgepoint_cn
      delete item.bank_point
      item.node = []
      item.node.push(state.selectedNode)
    }
    return array
  }
  // 试题的拥有者
  const isOwner = (question) =>{    
    let localUser = localGet('user_information')
    return localUser.username == question.owner_info.username
  }
  // 上传word文件成功
 const handleSuccess=(response)=> {
  console.log("上传返回数据：",response)
    if(response.code==200){ 
      console.log("成功返回试题：", response)
      ElMessage.success("获取所有题目成功！")
      state.returnQuestionList = deepClone(response.data.results.question_list)
      // 删除不需要的key，并添加关联知识点
      state.returnQuestionList = deepClone(deleteForPrivate(state.returnQuestionList))
      console.log('调整后的试题：',state.returnQuestionList)
      state.dialogVisible=false
      store.commit('setSelectQuestionList', state.returnQuestionList)    
      router.push("/AddPaperPrivate")
    }else
    if(response.code==201){
      ElMessage.warning("只获取部分题目")
      state.dialogVisible=false
      state.returnQuestionList = deepClone(response.data.results.question_list)  
      state.returnQuestionList = deepClone(deleteForPrivate(state.returnQuestionList))   
      state.dialogVisible=false
      store.commit('setSelectQuestionList', state.returnQuestionList)    
      router.push("/AddPaperPrivate")
    }else{
      ElMessage.warning("切题失败，请检查试卷")
      ElMessageBox.alert(
        response.message,
        '请检查试卷格式！',
        {
          dangerouslyUseHTMLString: true,
        }
      )
    }
  }
  // 上传失败处理
  const handleError=(response)=>{
    console.log("上传文件失败：", response)
  }
  // 处理选择录入试题的方式后
  const handleSelectAddQeustionType = (value)=>{
    console.log('选择了处理录入试题的方式：', value)
    if(state.selectedNode.id==0){
      ElMessage.warning("请先选择具体的章节哦~_~")
      return 0
    }
    if(value=='docx_attach'){
      state.dialogVisible = true
      state.accept = '.DOCX,.docx'
      state.upload_file = 'upload_file'
    }else
    if(value=='docx_detach'){
      state.upload_file = 'upload_file_detach'
      state.accept = '.DOCX,.docx'
      state.dialogVisible = true
    }else
    if(value=='markdown_detach'){
      state.upload_file = 'upload_file_detach'
      state.dialogVisible = true
      state.accept = '.ZIP,.zip'
    }else
    if(value=='markdown_attach'){
      state.upload_file = 'upload_file'
      state.dialogVisible = true
      state.accept = '.ZIP,.zip'
    }    
  }
  // 通过结构，获得appContext变量
  const { appContext } = getCurrentInstance()
  // 获得全局上下文后， 得到$bus事件总线
  const eventBus = appContext.config.globalProperties.$bus
  // 订阅本组件的事件,根据选择的章节目录，获取试题
  eventBus.on('ShowQuestionWaitNodeTree',(params)=>{
      console.log("tree传递过来的值", params)
      state.mode = params.mode
      if(params.mode == 'chapter'){
        state.selectedNode = params.selectedNode
        state.apiName = '/QuestionPrivateModelViewSet/get_question_id_type/'
        console.log('tree传来后存入state.selectedNode',state.selectedNode)
        getQuestion(params.selectedNode)
      }else{
        state.selectedTag = params.selectedTag
        state.apiName = '/TagModelViewSet/get_question'
        let param_temp = {tag_id: params.selectedTag.id}
        getQuestion(param_temp)
      }      
  })
  // 重新获取试题
  const reGetQuestion = ()=>{
    console.log('重新获取试题')
    let params={page:state.currentPage, size:state.size}
    if(state.mode=='chapter'){
      params['id'] = state.selectedNode.id
    }else{
      params['id'] = state.selectedTag.id
    }
    getQuestion(params)
  }
  // 读取试题,根据参数params里的id和type
  const getQuestion=(params)=>{
    console.log('向后端请求获取数据', state.apiName)
    axios.get(state.apiName,{params}).then(res => {
      if (res.code==200){
        console.log("列表题目：",res.data.results)
        state.questionList = res.data.results
        for(let index=0; index<state.questionList.length;index++ ){
          state.questionList[index].content = modifyDoubleDollarToSingle(state.questionList[index].content)
        }
        // console.log('修改后的列表试题：', state.questionList)
        state.total=res.total
        scrollToTop()
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
        state.total=0
        state.error = res.message
        if (res.code==403){
          ElMessage.error("请重新登录")
          router.push("/login")
        }
      }
    })
    .catch((error)=>{
      console.log("获取目录错误：", error)
    })
  }
  // 搜索
  const onClickSearch = () =>{
    let params={
        page: state.currentPage,
        size: state.pageSize,
        keyword: keyword.value,
      }
    axios.get('/QuestionPrivateModelViewSet/search_content_by_keyword/',{params}).then(res => {
      if (res.code==200){
        // console.log("列表题目：",res)
        state.questionList = res.data.results
        for(let index=0; index<state.questionList.length;index++ ){
          state.questionList[index].content = modifyDoubleDollarToSingle(state.questionList[index].content)
        }
        // console.log('修改后的列表试题：', state.questionList)
        state.total=res.total
        state.pageSize = 200
        scrollToTop()
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
        state.total=0
        state.error = res.message
        if (res.code==403){
          ElMessage.error("请重新登录")
          router.push("/login")
        }
      }
    })
    .catch((error)=>{
      console.log("获取目录题目错误：", error)
    })   
  }
  // 下载试卷pdf
  const onClickDownloadFile = (file) =>{
      //点击链接
      const link = document.createElement('a');
      link.href = file;
      link.setAttribute('download', 'download.pdf');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link)   
  }
  // 渲染数学公式mathjax
  const TypeSet = async function (elements) {
    if (!window.MathJax) {
        return
    }
    window.MathJax.startup.promise = window.MathJax.startup.promise
        .then(() => {
            return window.MathJax.typesetPromise(elements)
        })
        .catch((err) => console.log('Typeset failed: ' + err.message))
    return window.MathJax.startup.promise
  }
  // 获取默认的试题
  const getDefaultQuestion =() =>{
    axios.get(state.apiName).then(res => {
      // console.log("获取首页数据结果为：",res)
      if (res.code==200){
        console.log("默认列表题目：",res)
        state.questionList = res.data.results
        scrollToTop()
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
      }
    })
    .catch((error)=>{
      console.log("获取目录题目错误：", error)
    })   
  }
  // 页面初始化
  onMounted(()=>{
    getDefaultQuestion()
    TypeSet()
    getTagAll()
  })
  watch(()=> state.questionList,
  (newValue)=>{
    //直接调用TypeSet()也可以，但是会重新渲染页面所有公式
    TypeSet()
  })
  // 把双$符号改成单$符号
  const modifyDoubleDollarToSingle=(content_str) =>{
    while(content_str.includes('$$')){
      content_str = content_str.replace('$$', '$');
    }
    while(content_str.includes('\\\\')){
      content_str = content_str.replace('\\\\', '\\');
    }
    return content_str
  }
  //点击页码时触发
  const handleCurrentChange = (newPage)=>{
    state.currentPage = newPage
    if(keyword.value !=''){
      onClickSearch()
    }else {
      let params = {
        id:state.selectedNode.id,    
        'page':state.currentPage, 
        'size':state.size
      }
      getQuestion(params)
    }      
    document.querySelector('#questionsBodyRef').scrollIntoView(true);
  }
  const scrollToTop=()=>{
    document.querySelector('#questionsBodyRef').scrollIntoView(true);
  }
  //查看单个题目详情
  const viewDetail = (item)=>{
    state.question = item
    viewQuestionDetail.value.open(item)
  }
   //添加到购物车
   const addToCart = (event, item)=>{
    event.target.innerText = "已选"
    state.selectQuestionList.push(item)
  }
  //删除当前行所在的
  const handleDelete = (index) => {
    state.selectQuestionList.splice(index,1)
  }
  //编辑当前行的数据，将选中的内容赋值给state.question，待传给子组件, 并且深拷贝
  const handleEdit = (index)=> {
    state.type = "modifySelectedQuestion"
    state.question = JSON.parse(JSON.stringify(state.selectQuestionList[index]))
    editeOneQuestionDialogePrivate.value.open(index, state.question)
  }
  //删除选中的行
  const handeleMultiDelete = ()=>{ 
    for (const i in select_orderId.value){
      state.selectQuestionList.splice(i, 1)
    }
  }
  //选中的list
  const getRowKeys = (row) => {
      //记录每行的key值
      return row.id;
    }
//当表格选择项发生变化时会触发该事件
  const handleSelectionChange = (val) => {
      // 解决来回切换页面，也无法清除上次选中情况
      multipleSelection.value = val;
      select_order_number.value = multipleSelection.value.length;
      select_orderId.value = [];   //清空，再遍历加入
      if (val) {
        val.forEach((row) => {
          if (row) {  
            select_orderId.value.push(row.id);
          }
        });
      }     
  }
  // 查看购物车已选题目列表
  const showManyQuestionReadOnlyClick = ()=>{
    // 打开弹窗
    if(state.selectQuestionList.length>0){
      state.showQuestionList=deepClone(state.selectQuestionList)
      showManyQuestionReadOnlyDialog.value.open(state.showQuestionList)
    }else{
      ElMessage.warning( '请勾选题目！')
    }    
  }

  // 选中的题目存入全局状态，addPaperBySelectQuestionList把选中的题目列表提交给后台，生成docx文件，后台返回该docx的url
  const GroupQuestionListClick = ()=>{
    if(state.selectQuestionList.length==0){
      ElMessage.error("还没加入题目！")
      return false
    }
    for(let i=0; i<state.selectQuestionList.length; i++){
      state.selectQuestionList[i]['bank_point'] = 0
    }
    store.commit('setSelectQuestionList', state.selectQuestionList)
    store.commit('setIsPrivate', true)
    router.push("/addPaperBySelectQuestionList")
  }
  // 更新题目按钮处理
  const updateQuestionClick=(questionItem)=>{
    console.log("更新题目之前内容：",questionItem)
    state.type = "update"
    state.question = deepClone(questionItem)
    editeOneQuestionDialogePrivate.value.open(0, state.question)
  }

</script>
<style scoped>
html, body {
	width: 100%;
	height: 100%;
}
.showQuestion{
  display: flex;
  flex-direction: column;;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  margin: 1;
  padding: 1;
}
  .card-header {
    display: flex;
    justify-content:flex-end;
    align-items: flex-start;
    flex-flow: row nowrap;
    font-size: 12px;
    margin: 0;
    padding: 0;
    height: 20px;
  }
  .question-knowledge{
    display: flex;
    flex-flow: row wrap;
    justify-content:flex-start;
    align-items: flex-start;
    /* margin: 2rpx; */
  }
  .others{
    /* margin: 2rpx; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
  }
  .card_content {
    display: flex;
    flex-flow: column wrap;
    margin: 0px;
    padding: 0px;
  }
  .text {
    font-size: 12px;
  }
  .item {
    margin-bottom: 1px;
  }
  .box-card {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    height: auto;
    width: 100%;
    overflow-y: auto;
  }
  .line-break{
  white-space: pre-wrap;
  width: 950px;
  font-size: 16px;
  }
  img{
      display:block;
  }
  .affix-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: right;
    margin: 0 20px 0 0;
  }
  
.tableClass .cell{   
    padding: 0!important;
    height: 20px!important;
    line-height: 20px!important;
    text-align: center;
    font-size: 10px;
  }
  .tableButton{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .questionsBody{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }
  .addOneQuestionButton{
    margin: 0;
    padding: 0;
  }
  .pagination{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  /* .operateButton{
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
  } */
  .linkKnowledgepoint{
    display: flex;
    flex-flow: row nowrap;
  }
  .Bulletin {
    width: 450px;
    margin: 0;
    padding: 0;
    height: 22px;
    font-size: xx-small;
    white-space: nowrap;
    animation: scroll 10s linear infinite;
  }
  @keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.searchContent {
  margin: 1px;
  padding: 1pax;
  height: 22px;
}
/*
user-select: auto|none|text|all;
auto	默认。如果浏览器允许，则可以选择文本。
none	防止文本选取。
text	文本可被用户选取。
all	    单击选取文本，而不是双击。
*/
*{
user-select:none;
}

.prohibitSel{
user-select:none;
}
</style>